<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">


    <!--<link rel="stylesheet" href="css/lib/bootstrap.css">-->
    <link rel="stylesheet" href="css/lib/video-js.css">
    <link rel="stylesheet" href="css/lib/base.css">
    <link rel="stylesheet" href="css/lib/normal.css">



    <link rel="stylesheet" href="css/app/global.css">
    <link rel="stylesheet" href="css/app/top.css">
    <link rel="stylesheet" href="css/app/videoLib.css">
    <link rel="stylesheet" href="css/app/videoPlayer.css">
    <link rel="stylesheet" href="css/app/property.css">
    <link rel="stylesheet" href="css/app/element.css">
    <link rel="stylesheet" href="css/app/videoTime.css">
    <link rel="stylesheet" href="css/app/videoTimeScale.css">
    <link rel="stylesheet" href="css/app/dragger.css">

    <title>蕉片</title>


    <script src="js/lib/jquery2.1.2.js"></script>
    <!--<script src="js/lib/bootstrap.js"></script>-->
    <script src="js/lib/video.js"></script>
    <!--<script src="js/lib/jquery.SuperSlide.2.1.1.js"></script>-->
    <script src="js/lib/jquery.SuperSlide.2.1.1.source.js"></script>


</head>
<body>
    <!--上-->
    <section class="top"></section>
    <!--下-->
    <section class="bottom">
        <!--左-->
        <section class="bottom-left">
            <!--上-->
            <section class="bottom-left-top">
                <!--左-->
                <section class="bottom-left-top-left">
                    <!--视频库-->
                    <section class="videolib">
                        <!--title-->
                        <div class="videolib-title">视频元素</div>
                        <!--库-->
                        <div class="videolib-lib">
                            <!--本地视频-->
                            <div class="videolib-lib-local">
                                <!--文字说明-->
                                <div class="videolib-lib-local-title">本地视频</div>
                                <!--列表-->
                                <div class="videolib-lib-local-list">
                                    <!--添加框-->
                                    <div>
                                        <img src="img/add.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <!--&lt;!&ndash;媒资库&ndash;&gt;-->
                            <!--<div>-->
                                <!--&lt;!&ndash;文字说明&ndash;&gt;-->
                                <!--<div>媒资库</div>-->
                                <!--&lt;!&ndash;列表&ndash;&gt;-->
                                <!--<div>-->
                                    <!--&lt;!&ndash;添加框&ndash;&gt;-->
                                    <!--<div></div>-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </section>
                </section>
                <!--右-->
                <section class="bottom-left-top-right">
                    <!--视频播放器-->
                    <section class="video">
                        <video id="video-player" class="video-js vjs-default-skin vjs-matrix"
                               controls  preload="auto">
                            <!--<source src="http://www.newscctv.net/tap2cdn/video/short_video/hls/2017/03/21/27817/index.m3u8" type="application/x-mpegURL">-->
                        </video>
                    </section>
                </section>
            </section>
            <!--中-->
            <section class="bottom-left-middle">
                <!--视频时间-->
                <section class="videotime">
                    <div class="videotime-box">
                        <div class="videotime-box-time">
                            <div> 00:00</div>
                            <div> 00:07</div>
                            <div> 03:18</div>
                        </div>
                        <div class="videotime-box-dots">
                            <div class="videotime-box-dots-dot"></div>
                            <div class="videotime-box-dots-dot"></div>
                            <div class="videotime-box-dots-dot"></div>
                        </div>
                    </div>
                </section>
            </section>
            <!--下-->
            <section class="bottom-left-bottom">
                <!--时间标尺-->
                <div class="videotimescale">
                    <!--时间-->
                    <div></div>
                    <!--刻度-->
                    <div></div>
                </div>
                <!--拖拽区-->
                <div class="dragger">
                    <!--视频区域-->
                    <div class="dragger-videos">

                    </div>
                </div>
                <!--时间线-->
                <div class="videotimescale-stdruler">
                    <div class="videotimescale-stdruler-top"></div>
                </div>
                <div class="videotimescale-stdruler-black"></div>
            </section>
        </section>
        <!--右-->
        <section class="bottom-right">
            <!--上-->
            <section class="bottom-right-top">
                <!--属性-->
                <section class="property">
                    <!--title-->
                    <div class="property-title">属性</div>
                    <!--属性列表-->
                    <div></div>
                </section>
            </section>
            <!--下-->
            <section class="bottom-right-bottom">
                <!--插入元素-->
                <section class="element">
                    <div class="hd">
                        <ul>
                            <!--<li><img src="img/lvjing-off.png" alt=""></li>-->
                            <!--<li><img src="img/graph-off.png" alt=""></li>-->
                            <!--<li><img src="img/font-off.png" alt=""></li>-->
                            <!--<li><img src="img/music-off.png" alt=""></li>-->
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="bd">
                        <ul>
                            1
                        </ul>
                        <ul>
                            2
                        </ul>
                        <ul>
                            3
                        </ul>
                        <ul>
                            4
                        </ul>
                    </div>
                </section>
            </section>
        </section>
    </section>


    <script type="text/javascript">$(".element").slide();</script>


    <script src="js/app/config.js"></script>
    <script src="js/app/tool.js"></script>
    <script src="js/app/dataGlobal.js"></script>

    <script src="js/app/video.js"></script>
    <script src="js/app/material.js"></script>
    <script src="js/app/dragger.js"></script>

    <script>
        var Material = new Material();
        var Dragger = new Dragger();

    </script>

</body>
</html>